এক্সএইচটিএমএল (XHTML) ডকুমেন্টে বেসিক টাইপোগ্রাফি সেটিংস সেট করা খুবই গুরুত্বপূর্ণ, কারণ এর মাধ্যমে ওয়েব পেজের পাঠযোগ্যতা ও ডিজাইন উন্নত করা যায়। XHTML, HTML-এর মতোই, পাঠ্য এবং টাইপোগ্রাফি এলিমেন্ট ব্যবহারের জন্য সমর্থন প্রদান করে। তবে, XHTML ডকুমেন্টের ক্ষেত্রে কিছু অতিরিক্ত নিয়ম এবং গঠন রয়েছে, যা অনুসরণ করা আবশ্যক।
১. বেসিক টাইপোগ্রাফি উপাদান
১.১ প্যারাগ্রাফ (<p>)
প্যারাগ্রাফ ট্যাগ HTML এবং XHTML-এ একটি গুরুত্বপূর্ণ উপাদান। এটি সাধারণত পাঠ্য ব্লক তৈরি করতে ব্যবহৃত হয়। XHTML-এ <p> ট্যাগের মধ্যে থাকা সব টেক্সট একটি আলাদা প্যারাগ্রাফ হিসেবে রেন্ডার হয়।
<p>এই একটি সাধারণ প্যারাগ্রাফ।</p>
১.২ হেডিংস (<h1>, <h2>, ..., <h6>)
হেডিং ট্যাগগুলি ওয়েব পেজে বিভিন্ন স্তরের শিরোনাম তৈরি করতে ব্যবহৃত হয়। XHTML-এ, আপনি <h1> থেকে <h6> পর্যন্ত হেডিং ট্যাগ ব্যবহার করতে পারেন। এই ট্যাগগুলো বিভিন্ন আকারের পাঠ্য প্রদর্শন করে।
<h1>এটি একটি হেডিং ১</h1>
<h2>এটি একটি হেডিং ২</h2>
১.৩ বোল্ড এবং ইটালিক (<b>, <i>)
এক্সএইচটিএমএল ডকুমেন্টে পাঠ্যকে বোল্ড বা ইটালিক (italic) করতে <b> এবং <i> ট্যাগ ব্যবহার করা হয়। তবে, XHTML-এ টাইপোগ্রাফি নির্ধারণ করতে CSS ব্যবহার করা উচিত, কিন্তু যদি টেক্সটের বৈশিষ্ট্য পরিবর্তন করতে চান, তবেও এই ট্যাগগুলো ব্যবহৃত হতে পারে।
<p><b>এটি বোল্ড পাঠ্য।</b></p>
<p><i>এটি ইটালিক পাঠ্য।</i></p>
২. স্টাইল শীট (CSS) ব্যবহার
XHTML ডকুমেন্টে টাইপোগ্রাফি সেটিংসকে কাস্টমাইজ করার জন্য সাধারণভাবে CSS (Cascading Style Sheets) ব্যবহার করা হয়। CSS এর মাধ্যমে আপনি টেক্সটের ফন্ট, আকার, রঙ, স্পেসিং ইত্যাদি নিয়ন্ত্রণ করতে পারেন।
২.১ ফন্ট সেটিংস
XHTML-এ ফন্ট সাইজ, ফন্ট ফ্যামিলি এবং ফন্ট স্টাইল কাস্টমাইজ করার জন্য CSS ব্যবহার করা হয়। এর মাধ্যমে আপনি ওয়েব পেজের টাইপোগ্রাফির স্টাইল নির্ধারণ করতে পারেন।
<head>
<style type="text/css">
body {
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
font-size: 24px;
font-weight: bold;
}
</style>
</head>
এখানে, <body> ট্যাগের মধ্যে লেখার জন্য ফন্ট ফ্যামিলি Arial এবং ফন্ট সাইজ ১৬ পিক্সেল নির্ধারণ করা হয়েছে। একইভাবে, <h1> ট্যাগের জন্য ফন্ট সাইজ ২৪ পিক্সেল এবং বোল্ড সেট করা হয়েছে।
২.২ লাইন হাইট এবং লেটার স্পেসিং
টাইপোগ্রাফিতে লাইন হাইট (line-height) এবং লেটার স্পেসিং (letter-spacing) গুরুত্বপূর্ণ ভূমিকা রাখে। এগুলোর মাধ্যমে আপনি পাঠ্যের পড়া সহজ ও সুস্পষ্ট করতে পারেন।
<head>
<style type="text/css">
p {
line-height: 1.6;
letter-spacing: 0.5px;
}
</style>
</head>
এখানে, প্যারাগ্রাফের মধ্যে লাইন হাইট ১.৬ এবং লেটার স্পেসিং ০.৫ পিক্সেল নির্ধারণ করা হয়েছে।
২.৩ টেক্সট অ্যালাইনমেন্ট
CSS ব্যবহার করে আপনি টেক্সটের অ্যালাইনমেন্ট (alignment) নির্ধারণ করতে পারেন। text-align প্রপার্টি দিয়ে টেক্সটের অবস্থান (বাম, ডান, কেন্দ্র) নির্ধারণ করা যায়।
<head>
<style type="text/css">
h1 {
text-align: center;
}
p {
text-align: justify;
}
</style>
</head>
এখানে, <h1> ট্যাগের টেক্সট সেন্টারে এবং <p> ট্যাগের টেক্সট জাস্টিফাইড (justify) রাখা হয়েছে।
৩. তালিকা এবং ব্লক এলিমেন্ট
৩.১ অর্ডারড (Ordered) এবং আনঅর্ডারড (Unordered) তালিকা
টেক্সটের মধ্যে তালিকা প্রদর্শন করতে <ul> এবং <ol> ট্যাগ ব্যবহার করা হয়। তালিকার আইটেম গুলি <li> ট্যাগের মাধ্যমে চিহ্নিত হয়।
<ul>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
</ul>
<ol>
<li>প্রথম আইটেম</li>
<li>দ্বিতীয় আইটেম</li>
</ol>
এখানে, <ul> ট্যাগ একটি আনঅর্ডারড (unordered) তালিকা তৈরি করে এবং <ol> ট্যাগ একটি অর্ডারড (ordered) তালিকা তৈরি করে।
৪. টেক্সট কাস্টমাইজেশনের জন্য কিছু অন্যান্য CSS প্রপার্টি
৪.১ টেক্সট কালার
<head>
<style type="text/css">
p {
color: #333333;
}
</style>
</head>
এখানে, প্যারাগ্রাফের টেক্সটের রঙ সিলেক্ট করা হয়েছে #333333 (গা dark ় ধূসর)।
৪.২ টেক্সট ডেকোরেশন
<head>
<style type="text/css">
a {
text-decoration: none;
}
</style>
</head>
এখানে, লিঙ্ক (anchor tag) থেকে ডিফল্ট আন্ডারলাইন সরিয়ে দেওয়া হয়েছে।
৪.৩ ফন্ট ওজন
<head>
<style type="text/css">
p {
font-weight: normal;
}
strong {
font-weight: bold;
}
</style>
</head>
এখানে, প্যারাগ্রাফের টেক্সটের ফন্ট ওজন normal এবং <strong> ট্যাগের জন্য bold ফন্ট ওজন নির্ধারণ করা হয়েছে।
এক্সএইচটিএমএল ডকুমেন্টে টাইপোগ্রাফি সেটিংস সঠিকভাবে নির্ধারণ করা ওয়েব পেজের পাঠযোগ্যতা এবং ভিজ্যুয়াল অভিজ্ঞতা উন্নত করতে সহায়তা করে। CSS ব্যবহার করে আপনি ফন্ট, আকার, রঙ, স্পেসিং এবং অন্যান্য টাইপোগ্রাফিক বৈশিষ্ট্য কাস্টমাইজ করতে পারেন। XHTML-এ সঠিক গঠন এবং স্টাইলিং অনুসরণ করলে একটি সুন্দর এবং সুসংগঠিত ওয়েব পেজ তৈরি করা সম্ভব।
Read more
